<template>
  <div class="user-avator-dropdown">
    <Dropdown @on-click="handleClick">
      <Avatar style="background-color: #87d068" icon="person" />
      <Icon :size="12" type="arrow-down-b"></Icon>
      <DropdownMenu slot="list">
        <DropdownItem name="uploadLogo">上传图标</DropdownItem>
        <DropdownItem name="changePsw">修改密码</DropdownItem>
        <DropdownItem name="logout">退出登录</DropdownItem>
      </DropdownMenu>
    </Dropdown>
    <!--修改密码 -->
    <Modal
      v-model="modal.status"
      title="修改密码"
      :top="0"
      width="40%" @on-cancel="modalDefineCancel('modal.form')">
      <Form ref= 'modal.form' :model="modal.form" :label-width="82" :rules='ruleValidate'>
        <FormItem label="账号">
          <label> {{modal.form.loginName}}</label>
        </FormItem>
        <FormItem label="原密码" prop='password'>
          <Input type="password" v-model="modal.form.password" placeholder="原密码"></Input>
        </FormItem>
        <FormItem label="新密码" prop='newPassword'>
          <Input type="password" v-model="modal.form.newPassword" placeholder="新密码"></Input>
        </FormItem>
        <FormItem label="确认新密码" prop='verifyNewPassword'>
          <Input type="password" v-model="modal.form.verifyNewPassword" placeholder="再次输入新密码"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="default" @click="handleReset('modal.form')">取消</Button>
        <Button type="primary" @click="handleSubmit('modal.form')">确定</Button>
      </div>
    </Modal>
    <!--上传企业图标-->
    <Modal
      v-model="logo.status"
      title="修改系统图标"
      :top="0"
      width="40%"
      height="100%" class="logoModal">
      <Logo v-if="logo.status" v-on:cancleUploadModal="cancleLogoModal($event)"></Logo>
      <div slot="footer">
      </div>
    </Modal>
  </div>
</template>

<script>
import './user.less'
import { mapActions } from 'vuex'
import urlSource from "../../../../api/urlSource";
import Logo from "../../../logo/logo";

export default {
  name: 'user',
  components: {Logo},
  props: {
    userAvator: {
      type: String,
      default: ''
    },
  },
  data() {
    let _this = this;
    let validatePassword = function(rule, value, callback){
      if(!value){
        return callback(new Error("请输入密码"));
      }else if(value!=_this.oldPassword){
        return callback(new Error("原密码错误"))
      }else{
        callback();
      }
    };
    let validateNewPassword = function(rule, value, callback){
      if(!value){
        return callback(new Error("请输入新密码"));
      }else if(value.length < 6){
        return callback(new Error("新密码长度不少于6位"))
      }else{
        callback();
      }
    };
    let validateVerifyNewPassword = function(rule, value, callback){
      if(!value){
        return callback(new Error("请输入确认密码"));
      }else if(_this.modal.form.newPassword!=value){
        return callback(new Error("两次密码不一致"));
      }else{
        callback();
      }
    };
    return {
      modal: {
        status: false,
        form: {
          loginName: '',
          password: '',
          newPassword: '',
          verifyNewPassword:''
        },
      },
      logo: {
        status: false,
      },
      oldPassword: '',
      ruleValidate:{
        password : [{required: true,validator: validatePassword,trigger: 'blur'}],
        newPassword : [{required: true,validator: validateNewPassword,trigger: 'blur'}],
        verifyNewPassword : [{required: true,validator: validateVerifyNewPassword,trigger: 'blur'}]
      },
    }
  },
  methods: {
    ...mapActions([
      'handleLogOut'
    ]),
    handleReset (name) {
      this.modal.status=false;
      this.$refs[name].resetFields();
    },
    modalDefineCancel (name){
      this.$refs[name].resetFields();
    },
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.updatePsw();
        } else {
          this.$Message.error('请正确填写信息');
        }
      })
    },
    cancleLogoModal() {
      this.logo.status = false;
    },
    updatePsw() {
      let url = urlSource.apiUrl + 'users/updateUserPsw';
      this.$http.post(url,{id:this.$store.state.user.userId,password:this.modal.form.newPassword}).then( res => {
        if(res.data){
          this.modal.status=false;
          this.$Message.success("修改成功,请重新登录!");
        }
      }).catch(err => {
      });
    },
    openChangePswModal() {
      this.modal.status = true;
      this.modal.form.password = '';
      this.modal.form.newPassword = '';
      this.modal.form.verifyNewPassword = '';
    },
    openLogoModal() {
      this.logo.status = true;
    },
    getUserInfo(userId){
      let url = urlSource.apiUrl + 'users/getUserInfo/'+ userId;
      this.$http.get(url).then(res => {
        if(res.data){
          this.modal.form.loginName = res.data.loginName;
          this.oldPassword = res.data.password;
        }
      })
    },
    handleClick (name) {
      switch (name) {
        case 'logout':
          this.handleLogOut().then(() => {
            this.$router.push({
              name: 'login'
            })
          })
          break;
        case 'changePsw':
          this.openChangePswModal();
          break;
        case 'uploadLogo':
          this.openLogoModal();
          break;
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getUserInfo(this.$store.state.user.userId);
    })
  }
}
</script>
<style>
  .logoModal .ivu-modal-footer{
    display: none;
  }
  .logoModal .ivu-modal-body{
    padding: 0;
  }
  .logoModal .ivu-form-item{
    padding: 16px 16px 0 16px;
  }
</style>
